<template>
	<div id="signup">
		<div class="actives">
			<div class="title flex">
				<div class="return">
					<img @click="back" src="../assets/image/return.png" />
				</div>
				<div style="font-size: 0.73913rem;">
					我要报名
				</div>
				<div class="add">
					<img src="../assets/image/chaungjian.png" />
				</div>
			</div>
			<div class="tops flex" v-if="tableData">
				<div class="tips">
					请选择优惠模板
				</div>
				<div v-for="(item,index) in tableData" class="list" v-bind:class="{active:index==isActive}" @click="checkItem(index,item.market_id)">
					<div class="mes flex">
						<div class="left">
							<div>编号：{{item.market_id}}</div>
							<div>{{item.coupons_name}}</div>
						</div>
						<div class=" mes_center">
							已审核

						</div>
						<div class="mes_right">
							<img v-if="index==isActive" src="../assets/image/beidianji.png" />
							<img v-if="index!=isActive" src="../assets/image/weidianji.png" />
						</div>
					</div>

				</div>
                   <div class="but">
			<el-button style="width: 100%;height: 2rem;" type="primary" @click="open">我要报名</el-button>
		</div>
			</div>
			<div v-else class="none flex">
				您还没有任何可以用的模板哦~
			</div>
		</div>

		

		<div class="mask">
			<div class="tip flex">
				<div class="tip_title flex">

					<div>报名成功，请耐心等待</div>

				</div>

				<div class="tip_btn flex">
					<div @click="yincang">我知道了</div>
				</div>

			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tableHeight: null,
				radio: "",
				isActive: -1,
				rowObj: '',
				active_id:this.$route.query.active_id,//活动id
				tableData:"",
				youhui_id:"",
			}
		},
		//在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
		created: function() {},
		methods: {
			back() {
				this.$router.go(-1)
			},

			checkItem(index,id) {
				this.isActive = index;
				this.youhui_id=id;

			},
			skiptoedit() {
				this.$router.push({
					path: '/edit'
				});
			},

			
			open() {
				
				if(this.isActive >=0) {
					var that=this;
      var qs = require('qs');
			that.$http.post(this.baseURL+"/index.php/waveguest/coupon/enroll_baom", qs.stringify({
						"id":localStorage.getItem("store_id"),
						"active_id":that.active_id,
						"youhui_id":that.youhui_id,
						"key":localStorage.getItem("key")
						
				})).then(response => {
					if(response.data.status==200){
						$(".mask").css('display', 'block');
					}else{
						this.$message.error(response.data.message);
					}

					
					})
					.catch(error => {

					});
				
				} else {
					this.$message({
						message: '请先选择优惠模板',
						type: 'warning'
					});
				}

			},
			yincang() {
				$(".mask").css('display', 'none');
                this.$router.push({
						path: '/square'
					});
			},
			 list(){
           	var that=this;
      var qs = require('qs');
			that.$http.post(this.baseURL+"/index.php/waveguest/coupon/enroll", qs.stringify({
						"id":localStorage.getItem("store_id"),
						"key":localStorage.getItem("key")
				})).then(response => {
					
					that.tableData=response.data.data
					console.log(that.tableData)
					})
					.catch(error => {

					});
    
           }

		},
		mounted() {
       this.list()
		}
	}
</script>

<style>
	.el-message {
		min-width: 4rem;
		top: 40% !important;
	}
	
	/deep/ .el-message {}
</style>
<style scoped="scoped">
	.signup {
		width: 100%;
		max-width: 640px;
	}
	
	.tips {
		font-size: 0.56521rem;
		padding: 0.5rem 2rem;
	}
	
	.return {
		width: 0.67391rem;
		height: 0.67391rem;
	}
	
	.return>img {
		width: 0.67391rem;
		height: 0.67391rem;
	}
	
	.add {
		width: 1rem;
		height: 1rem;
	}
	
	.add>img {
		width: 1rem;
		height: 1rem;
	}
	
	.but {
		position: fixed;
		bottom: 0rem;
		width: 100%;
	}
	
	.title {
		height: 2rem;
		position: fixed;
		top: 0;
		justify-content: space-between;
		align-items: center;
		width: 90%;
		padding: 0 5%;
		background: white;
		z-index: 99;
	}
	
	.tops {
		-webkit-overflow-scrolling : touch;
		position: fixed;
		bottom: 2rem;
		top: 1.9rem;
		background: #F5F6FA;
		width: 100%;
		overflow-y: scroll;
		flex-direction: column;
	}
	
	.list {
		margin-bottom: 0.5rem;
		margin-left: 0.5rem;
		margin-right: 0.5rem;
		padding: 0.1rem 0.3rem;
		background: url(../assets/image/couponmaxh.png) no-repeat;
		background-size: 100%;
		border-radius: 10px;
	}
	
	.active {
		color: #007AFF;
		background: url(../assets/image/dainjibg.png) no-repeat;
		margin-bottom: 0.5rem;
		margin-left: 0.5rem;
		margin-right: 0.5rem;
		padding: 0.1rem 0.3rem;
		background-size: 100%;
		border-radius: 10px;
	}
	
	.mes {
		margin: 0.5rem;
		font-size: 0.8rem;
		justify-content: space-between;
		align-items: center;
	}
	
	.mes>.left>div:nth-child(1) {
		font-size: 0.5217rem;
	}
	
	.mes>.left>div:nth-child(2) {
		font-size: 1.10869rem;
		font-weight: 400;
	}
	
	.title_left {
		font-size: 0.6956rem;
		font-weight: bold;
		color: #3e474e;
	}
	
	.mes_center {
		font-size: 0.60869rem;
	}
	
	.mes_right>img {
		width: 0.65217rem;
		height: 0.65217rem;
	}
	
	.mes_right {
		width: 0.65217rem;
		height: 0.65217rem;
	}
	
	.mask {
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.4);
		transition: all 0.2s ease-in;
		z-index: 99;
		display: none;
	}
	
	.tip_btn {
		width: 100%;
		height: 1.9043rem;
		justify-content: center;
		align-items: center;
		padding-top: 1rem;
	}
	
	.tip_btn>div {
		width: 6.3913rem;
		height: 1.3043rem;
		background: #007AFF;
		border-radius: 0.47826rem;
		color: white;
		font-size: 0.60869rem;
		text-align: center;
		line-height: 1.3043rem;
	}
	
	.tip {
		position: fixed;
		left: 50%;
		top: 50%;
		width: 13.78260rem;
		height: 6.47826rem;
		margin-top: -3.23913rem;
		margin-left: -6.89282rem;
		background: white;
		border-radius: 0.5rem;
		flex-direction: column;
	}
	
	.tip_title {
		width: 90%;
		padding: 5%;
		font-size: 0.7826rem;
		justify-content: center;
		align-items: center;
		line-height: 2rem;
	}
	
	.tip_title img {
		width: 0.565212rem;
		height: 0.565212rem;
	}
	
	.center div {
		width: 60%;
		margin-left: 20%;
		height: 2rem;
		color: #3E474E;
		font-size: 0.565217rem;
	}
	.none{
		position: fixed;
		width: 100%;
		height: 100%;
		background: #F5F6FA;
		justify-content: center;
		align-items: center;
		font-size: 0.5217rem;
	}
</style>